<template>
  <div class="search">
    <van-search
      placeholder="请输入搜索关键词"
      show-action
      v-model="keyword"
      @search="onSearch"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>

    <div class="hotsearch-box">
      <div class="hot-title">热门搜索</div>
      <div class="hot-list">
        <div class="hot-name" ref="mydiv" @click="searchdiv">吸尘器</div>
        <div class="hot-name">吸尘器</div>
        <div class="hot-name">吸尘器</div>
        <div class="hot-name">吸尘器</div>
      </div>
    </div>
    <!-- t推荐内容 -->
    <div class="recommend" v-show="keyword === ''">
      <div class="recommend-box">
        <div class="box"></div>
      <Recommend :productId="searchResult"></Recommend>
        
      </div>
    </div>



    <div v-show="keyword != ''">
      <ProductList :productList="searchResult"></ProductList>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Recommend from '@/components/Recommend'
import ProductList from "@/components/productList.vue";
export default {
  data() {
    return {
      keyword: "",
      searchResult: [],
    };
  },
  watch: {
    keyword(value) {
      console.log("111");
      this.getapi(value);
    },
  },
  methods: {
    onSearch(val) {
      this.keyword = val;
      console.log(this.keyword);
    },

    getapi(keyword) {
      this.axios("api/products", {
        params: {
          keyword: keyword,
        },
      }).then((res) => {
        this.searchResult = res.data.data;
        console.log(this.searchResult);
        // console.log(res);
      });
    },

    searchdiv(){
      // console.log( this.$refs.mydiv);
    }
  },
  computed:{
    ...mapState(['user1','user2','user3'])
  },
  created() {
    this.getapi(this.keyword);
  },
  components: {
    ProductList,
    Recommend
  },
};
</script>

<style lang="less" scoped>
.search {
  padding-bottom: 50px;
  .hotsearch-box {
    padding: 10px;

    .hot-title {
      color: #999;
      text-align: left;
      font-size: 15px;
    }
    .hot-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 10px;
      .hot-name {
        width: 15%;
        font-size: 13px;
        margin: 5px 0;
        padding: 3px;
        border: 1px solid #aaa;
        text-align: center;
        color: #454545;
      }
    }
  }
}

.recommend {
  width: 100%;
  height: 20%;
  border-top: 2px solid #e8e8e8;
  .recommend-box {
    padding-top: 35px;
    .box {
      width: 60%;
      height: 200px;
      border: 1px solid #aaa;
      margin: 0 auto;
    }
    .box2 {
      width: 100%;
      padding: 35px 0px;
      div {
        text-align: center;
        margin: 0 auto;
      }
    }
  }
}

</style>